<template>
  <an-form-title title="登录" />

  <van-form @submit="onSubmit">
    <van-field
      v-model="fd.username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="fd.password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>
<script lang="ts">
import AnFormTitle from "@/components/AnFormTitle.vue"
import { defineComponent, reactive } from "vue"
import { useRouter } from "vue-router"
import { useUserStore } from '@/store/user'
import { routerPaths } from '@/router'

export default defineComponent({
  components: { AnFormTitle },
  setup() {
    const store = useUserStore()
    const router = useRouter()
    const fd = reactive({
      username: '',
      password: '',
    })
    function onSubmit() {
      store.dispatch('login', fd).then(() => {
        router.push({ path: routerPaths.home })
      })
    }
    return {
      fd,
      onSubmit
    }
  },
})
</script>
